<div class="w-full h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-11.65rem)] overflow-y-auto border rounded-lg p-4 enclosing-container">

  <div class="flex justify-between items-center pb-2 pt-2">
    <h2 class="text-lg  flex items-center gap-2">
      Current Booklore Users
    </h2>
    <p-button outlined="true" label="Create User" icon="pi pi-plus" (onClick)="openCreateUserDialog()"></p-button>
  </div>

  <p-table [value]="users" class="mt-4">
    <ng-template pTemplate="header">
      <tr>
        <th>Type</th>
        <th>Username</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Assigned Libraries</th>
        <th style="width: 60px;">Admin</th>
        <th style="width: 60px;">Upload</th>
        <th style="width: 60px;">Download</th>
        <th style="width: 80px;">Edit Metadata</th>
        <th style="width: 80px;">Manage Library</th>
        <th style="width: 80px;">Email Books</th>
        <th style="width: 80px;">Delete Books</th>
        <th style="width: 120px;">Edit</th>
        <th style="width: 80px;">Change Password</th>
        <th style="width: 80px;">Delete</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-user>
      <tr>
        <td>
          {{ (user.provisioningMethod || 'LOCAL') | lowercase | titlecase }}
        </td>
        <td>{{ user.username }}</td>
        <td>
          @if (user.isEditing) {
            <input type="text" [(ngModel)]="user.name" class="p-inputtext w-full"/>
          }
          @if (!user.isEditing) {
            <span>{{ user.name }}</span>
          }
        </td>
        <td>
          @if (user.isEditing) {
            <input type="email" [(ngModel)]="user.email" class="p-inputtext w-full"/>
          }
          @if (!user.isEditing) {
            <span>{{ user.email }}</span>
          }
        </td>
        <td>
          @if (user.isEditing) {
            <p-multiSelect
              [options]="allLibraries"
              optionLabel="name"
              optionValue="id"
              [(ngModel)]="editingLibraryIds"
              placeholder="Select Libraries"
              appendTo="body">
            </p-multiSelect>
          }
          @if (!user.isEditing) {
            <span>
              {{ user.libraryNames }}
            </span>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.admin"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.admin" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canUpload"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canUpload" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canDownload"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canDownload" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canEditMetadata"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canEditMetadata" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canManipulateLibrary"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canManipulateLibrary" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canEmailBook"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canEmailBook" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          @if (user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canDeleteBook"></p-checkbox>
          }
          @if (!user.isEditing) {
            <p-checkbox [binary]="true" [(ngModel)]="user.permissions.canDeleteBook" disabled></p-checkbox>
          }
        </td>
        <td class="text-center">
          <ng-container>
            @if (!user.isEditing) {
              <p-button icon="pi pi-pencil" outlined="true" severity="info" (onClick)="toggleEdit(user)"></p-button>
            }
            @if (user.isEditing) {
              <p-button icon="pi pi-check" outlined="true" severity="success" (onClick)="saveUser(user)"></p-button>
            }
            @if (user.isEditing) {
              <p-button icon="pi pi-times" outlined="true" severity="danger" (onClick)="toggleEdit(user)"></p-button>
            }
          </ng-container>
          <p-button
            icon="pi pi-pencil"
            outlined="true"
            severity="primary"
            [ngStyle]="{'display': 'none'}">
          </p-button>
        </td>
        <td class="text-center">
          <ng-container>
            <p-button icon="pi pi-key" outlined="true" severity="warn" (onClick)="openChangePasswordDialog(user)"></p-button>
          </ng-container>
        </td>
        <td class="text-center">
          <ng-container>
            <p-button [disabled]="user.id === currentUser?.id" icon="pi pi-trash" outlined="true" severity="danger" (onClick)="deleteUser(user)"></p-button>
          </ng-container>
        </td>
      </tr>
    </ng-template>
  </p-table>

  <p-dialog header="Change Password" [(visible)]="isPasswordDialogVisible" [modal]="true" [closable]="false" [style]="{width: '20vw'}">
    <div class="flex flex-col gap-8 items-center">
      <p-password [(ngModel)]="newPassword" placeholder="New Password" [feedback]="false" class="w-full" fluid></p-password>
      <p-password [(ngModel)]="confirmNewPassword" placeholder="Confirm Password" [feedback]="false" class="w-full" fluid></p-password>
      @if (passwordError) {
        <p class="p-error text-red-500 w-full text-left">{{ passwordError }}</p>
      }
      <div class="flex gap-4 w-full justify-end">
        <p-button label="Cancel" icon="pi pi-times" severity="secondary" (onClick)="isPasswordDialogVisible = false"></p-button>
        <p-button label="Change" icon="pi pi-check" severity="success" (onClick)="submitPasswordChange()"></p-button>
      </div>
    </div>
  </p-dialog>
</div>
